<template>
  <div class="box" style="width: 100% ;height: 3000px ;background-color: white">
    <div class="wai" style="width: 100%;height: 100px;background-color: white">
      <span style="font-size: 35px;color: red; font-family: cursive;margin-left: 150px;margin-top: 20px;cursor: pointer;">全部分类</span>
      <span style="font-size: 25px;color: black; font-family: cursive;margin-left: 150px;margin-top: 20px;cursor: pointer;">推荐分类</span>
      <span style="font-size: 25px;color: black; font-family: cursive;margin-left: 150px;margin-top: 20px;cursor: pointer;">网络竞技</span>
      <span style="font-size: 25px;color: black; font-family: cursive;margin-left: 150px;margin-top: 20px;cursor: pointer;">单机热游</span>
      <span style="font-size: 25px;color: black; font-family: cursive;margin-left: 150px;margin-top: 20px;cursor: pointer;">科技文化</span>
      <span style="font-size: 25px;color: black; font-family: cursive;margin-left: 150px;margin-top: 20px;cursor: pointer;">语音互动</span>
      <span style="font-size: 25px;color: black; font-family: cursive;margin-left: 150px;margin-top: 20px;cursor: pointer;">语音直播</span>
      <div style="width: 100%;height: 15px;background-color: white"></div>
      <span style="font-size: 25px;color: black; font-family: cursive;margin-left: 446px;margin-top: 20px;cursor: pointer;">娱乐天地</span>
      <span style="font-size: 25px;color: black; font-family: cursive;margin-left: 149px;margin-top: 20px;cursor: pointer;">手游休闲</span>
    </div>



    <div style="width: 100%;height: 5px;background-color: #999999"></div>
    <span style="font-size: 30px;color: red; font-family: cursive;margin-left: 150px;margin-top: 20px">推荐分类:</span>
    <div style="width: 92%;height: 5px;background-color: #999999;margin-top: 50px;margin: 0 auto;"></div>

    <div class="wai" style="width: 95%;height: 800px;background-color: white;margin: 0 auto;">
      <el-row>
        <el-col :span="3" v-for="(o, index) in livetype" :key="o" :offset="index > 0 ? 0 : 0">
          <el-card :body-style="{ padding: '0px'}" style="width: 150px;height: 180px;margin-left: 44px;margin-top: 35px">
            <img :src="o.pic" class="image" style="width: 150px;height: 150px;cursor: pointer;":title="o.atName" @click="feileidian(o.id)">
            <div style=" margin: 0 auto">
              <span style="margin: 0 auto;margin-left: 36px;margin-top: 20px">{{o.atName}}</span>
              <div class="bottom clearfix">

              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>


    <div style="width: 100%;height: 5px;background-color: #999999;margin-top: -100px"></div>
    <span style="font-size: 30px;color: red; font-family: cursive;margin-left: 150px;margin-top: 20px">推荐分类:</span>
    <div style="width: 92%;height: 5px;background-color: #999999;margin-top: 50px;margin: 0 auto;"></div>

    <div class="wai" style="width: 95%;height: 800px;background-color: white;margin: 0 auto;">
      <el-row>
        <el-col :span="3" v-for="(o, index) in livetype" :key="o" :offset="index > 0 ? 0 : 0">
          <el-card :body-style="{ padding: '0px'}" style="width: 150px;height: 180px;margin-left: 44px;margin-top: 35px">
            <img :src="o.pic" class="image" style="width: 150px;height: 150px;cursor: pointer;":title="o.atName" @click="feileidian(o.id)">
            <div style=" margin: 0 auto">
              <span style="margin: 0 auto;margin-left: 36px;margin-top: 20px">{{o.atName}}</span>
              <div class="bottom clearfix">

              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>




    <div style="width: 100%;height: 5px;background-color: #999999;margin-top: -100px"></div>
    <span style="font-size: 30px;color: red; font-family: cursive;margin-left: 150px;margin-top: 20px">推荐分类:</span>
    <div style="width: 92%;height: 5px;background-color: #999999;margin-top: 50px;margin: 0 auto;"></div>

    <div class="wai" style="width: 95%;height: 800px;background-color: white;margin: 0 auto;">
      <el-row>
        <el-col :span="3" v-for="(o, index) in livetype" :key="o" :offset="index > 0 ? 0 : 0">
          <el-card :body-style="{ padding: '0px'}" style="width: 150px;height: 180px;margin-left: 44px;margin-top: 35px">
            <img :src="o.pic" class="image" style="width: 150px;height: 150px;cursor: pointer;":title="o.atName" @click="feileidian(o.id)">
            <div style=" margin: 0 auto">
              <span style="margin: 0 auto;margin-left: 36px;margin-top: 20px">{{o.atName}}</span>
              <div class="bottom clearfix">

              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>


    <div style="width: 100%;height: 5px;background-color: #999999;margin-top: -100px"></div>
    <span style="font-size: 30px;color: red; font-family: cursive;margin-left: 150px;margin-top: 20px">推荐分类:</span>
    <div style="width: 92%;height: 5px;background-color: #999999;margin-top: 50px;margin: 0 auto;"></div>

    <div class="wai" style="width: 95%;height: 800px;background-color: white;margin: 0 auto;">
      <el-row>
        <el-col :span="3" v-for="(o, index) in livetype" :key="o" :offset="index > 0 ? 0 : 0">
          <el-card :body-style="{ padding: '0px'}" style="width: 150px;height: 180px;margin-left: 44px;margin-top: 35px">
            <img :src="o.pic" class="image" style="width: 150px;height: 150px;cursor: pointer;":title="o.atName" @click="feileidian(o.id)">
            <div style=" margin: 0 auto">
              <span style="margin: 0 auto;margin-left: 36px;margin-top: 20px">{{o.atName}}</span>
              <div class="bottom clearfix">

              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <div class="nanshouhen" style="width: 100% ; height: 500px;background-color: green;margin: 0 auto;margin-top: -100px" >
      <img src="http://qmgk0uvzn.hn-bkt.clouddn.com/QQ%E5%9B%BE%E7%89%8720210105191843.png" style="width: 100%;height: 500px;margin: 0 auto">
    </div>
    <div class="nanshouhen1" style="width: 100% ; height: 500px;background-color:#3f3f3f;margin: 0 auto" >
      <div class="nanshouhen" style="width: 100% ; height: 500px;background-color: #3f3f3f;margin: 0 auto" >
        <img src="http://qmgk0uvzn.hn-bkt.clouddn.com/QQ%E5%9B%BE%E7%89%8720210105191550.png" style="width: 100%;height: 500px;margin: 0 auto;">
      </div>
    </div>

  </div>
</template>

<script>
import axios from  'axios'
export default {
  data() {
    return {
      currentDate: new Date(),
      livetype:[]
    };
  },
  methods:{
    feileidian:function (id){
      this.$router.push("/zhibohome")
    },
    findAllLiveType:function (){
      axios.get("http://localhost:7000/live-live/live/selecttype").then(res=>{
        if(res.data.code==200){
          this.livetype=res.data.data
          console.log(res.data.data)
        }
      })
    }
  },
  mounted() {
  this.findAllLiveType()
  }
}
</script>

<style scoped>

.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}
</style>
